<template>
  <navigation></navigation>
  <div class="overall">
    <div class="content">
      <div class="search">
        <el-input
          v-model="input"
          style="width: 240px"
          placeholder="请输入搜索内容"
          :suffix-icon="Search"
        />
      </div>
      <div class="content-text">
        <div
          class="content-text-all"
          v-for="item in competitionInfo"
          :key="item"
        >
          <div class="content-left">
            <div content-left-title>
              <div class="content-left-title-noe">
                <span class="noe-left">正在报名</span>
                <span class="noe-right">{{ item.name }} </span>
              </div>
              <div class="content-left-title-two">
                <span class="noe-left">活动地点</span>
                <span class="two-right">{{ item.sponsor }} </span>
              </div>
              <div class="content-left-title-three">
                <span class="noe-left">报名时间</span>
                <span class="two-right"
                  >{{ item.signstartdate }}~{{ item.signenddate }}
                </span>
              </div>
              <div class="content-left-title-three">
                <span class="noe-left">竞赛时间</span>
                <span class="two-right"
                  >{{ item.startdate }}~{{ item.enddate }}
                </span>
              </div>
            </div>
          </div>
          <div class="content-right">
            <el-button round size="large" @click="signup(item.id)"
              >进入报名</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <bottom></bottom>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import router from "@/router";
import { useRoute } from "vue-router";
import axios from "axios";
const input = ref("");

const route = useRoute();
const string = ref(route.query.string);
const competitionInfo = ref([]);

const query = () => {
  axios
    .get(
      `http://localhost:3000/TbCompetitionActivityController/getSearchCompetitioninfo/${string.value}`
    )
    .then((res) => {
      console.log(res);
      competitionInfo.value = res.data.data;
      console.log(competitionInfo.value);
    });
};

onMounted(() => {
  query();
});

const signup = (id) => {
  if (localStorage.getItem("token")) {
    router.push({
      path: "/StuSign",
      query: { id: id },
    });
  } else {
    alert("请先登录！");
  }
};
</script>

<style scoped>
.overall {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.content {
  width: 1150px;
  /* background-color: aliceblue; */
}

.content-text {
  margin-top: 15px;
  padding-top: 15px;
  padding-bottom: 25px;
  box-shadow: 0 0 1px 1px #dad8d8;
}

.content-text-all {
  display: flex;
  justify-content: space-between;
  width: 1100px;
  margin: auto;
  margin-top: 20px;
  box-shadow: 0 0 1px 1px #cfcdcd;
}

.content-left-title-noe {
  padding-top: 30px;
}
.content-left {
  padding-left: 20px;
  padding-bottom: 20px;
}

.content-right {
  margin-right: 50px;
  margin-top: 88px;
}

.noe-left {
  font-size: 15px;
  color: rgb(44, 125, 84);
}

.noe-right {
  padding-left: 20px;
  font-size: 20px;
  font-weight: 700;
}

.content-left-title-two {
  padding-top: 50px;
}

.two-right {
  padding-left: 20px;
  font-size: 15px;
  color: #999;
}

.content-left-title-three {
  padding-top: 5px;
}
</style>